This invention relates to web applications that use browser scripts in markup language documents, and in particular to efficient event delegation in web applications that execute scripts in browsers.
A browser application allows a user to retrieve and present information from resources on a network, such as the Internet or a private network. Browser applications allow users to interact with the resources on the network via a user interface. For example, a user can send a message to another user with the help of a web application. The user interacts with a user interface of the application to perform various actions including entering the message and clicking on a button to send the message. The user interface responds to user inputs by performing appropriate actions. For example, when the user clicks the send button in the above application, the browser collects information provided by the user and transmits the information to a web server with instructions to send the information to another user.
A web server sends information to a browser application running on a client device in the form of documents written in a markup language, such as Hypertext Markup Language (HTML). A markup language document retrieved by a browser application contains data and instructions that are executed on by the browser application. For example, a markup language document can include scripts for execution by a scripting engine of the browser application. An example of a scripting language supported by browser applications is JAVASCRIPT.
Web applications often use event-driven programming model in which the flow of the program is determined by events. An event is an action typically initiated outside the scope of a program, for example, mouse click or key press that is handled by instructions in the program. The set of instructions in a program that handle an event is called a handler or event-handler. Typically event handlers are associated with certain markup language elements, for example hyper text markup language (HTML) elements including links, buttons or images. In web applications, a user performs actions that result in creation of events that cause one or more handlers specified in the webpage to be invoked so as to execute certain actions. Examples of user actions resulting in events include clicking on a button or a link, pressing a key on the keyboard, moving the mouse over an element, moving the mouse away from an element etc.
A large number of event handlers may be defined for a web page. A webpage may be represented using a hierarchical structure, for example using a document object model (DOM) tree. The hierarchical structure has one or more root nodes that do not have any parent nodes. A mechanism to delegate events is to register the handler with a representation of the entire web page, for example the root node. Every event is matched against every handler associated with the web page to check if the handler should be executed for the given event. There can be several hundreds or thousands of event handlers defined for some web pages. As a result, selecting the correct set of handlers for execution in response to a user action can be a performance intensive operation. Going through all handlers to determine the set of handlers to be executed in response to an event takes time proportional to the number of handlers. If the number of handler is large, going through all handlers for each event can result in an application that responds slowly and provides an inferior user experience. Since every user interaction results in events, an inefficient method for processing handlers for an event adversely affects the performance of the application, resulting in slow response to user actions.